<template>
  <div class="contain">
    <div class="search">
      <div class="box">
        <input
          type="text"
          placeholder="输入区块号、区块哈希、交易号、交易哈希进行查询"
          class="searchInput"
        />
        <button class="searchBtn"></button>
      </div>
    </div>
    <div class="tableBox">
      <el-table
        :data="transactionData"
        style="width: 60%"
        class="tableOne"
        stripe
        :header-row-style="headerStyle"
      >
        <el-table-column label="交易列表">
          <el-table-column
            prop="txBlockNum"
            label="区块高度"
            min-width="120"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="txHash"
            label="交易哈希"
            min-width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="txDate"
            label="产生时间"
            min-width="120"
            align="center"
          >
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Ajax from '../../apis/ajax'
export default {
  name: 'transactionList',
  data () {
    return {
      transactionData: []
    }
  },
  mounted () { this.getTransactionInfo() },
  methods: {
    headerStyle () {
      return 'background:#b19577;fontSize:15px'
    },
    getTransactionInfo () {
      return Ajax({
        url: '/tx/alltx',
        method: 'GET'
      })
        .then(resData => {
          // eslint-disable-next-line eqeqeq
          if (resData.code == 200) {
            // console.log(resData.data)
            this.transactionData = resData.data
          }
        })
        // eslint-disable-next-line handle-callback-err
        .catch(error => {})
    }
  }

}
</script>

<style  lang="scss" scoped>
.contain {
.search {
  height: 80px;
  background-color: #fff;
  margin: 0 auto;
.box {
  width: 90%;
  height: 40px;
  margin: 0 auto;
  padding-top: 40px;
  display: flex;
  align-items: center;

.searchInput {
  width: 90%;
  height: 40px;
  border: 1px solid #b19577;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-left: 10px;
}
.searchBtn {
  width: 10%;
  height: 40px;
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background: url(../../images/search.png) no-repeat center center;
  background-color: #b19577;
  background-size: 25px;
}
}
}
.tableBox {
  width: 80%;
  //margin-top: 30px;
  margin: 30px auto;
  display: flex;
}
}
</style>
